<template>
	<el-dialog v-model="visible" :close-on-click-modal="false" :title="form.id ? $t('Order.view') : $t('common.addBtn')" draggable>
		<el-form ref="dataFormRef" v-loading="loading" :model="form" :rules="dataRules" formDialogRef label-width="140px">
			<el-row :gutter="24">
				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.type')" prop="type">
						<el-select v-model="form.type" clearable disabled filterable>
							<el-option v-for="(item, index) in biz_order_type" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.state')" prop="state">
						<OrderStateTag :state="form.state" />

						<!-- <el-input disabled v-model="form.state" clearable show-word-limit /> -->
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.userInfo')" prop="uid">
						<card-info-col :icon="form.userAvatar" :name="form.userNickname" />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.shopInfo')" prop="shopId">
						<card-info-col :icon="form.shopAvatar" :name="form.shopName" />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.orderAmount')" prop="orderAmount">
						<el-input v-model="form.orderAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.actualAmount')" prop="actualAmount">
						<el-input v-model="form.actualAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.taxAmount')" prop="taxAmount">
						<el-input v-model="form.taxAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.freightAmount')" prop="freightAmount">
						<el-input v-model="form.freightAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.reduceAmount')" prop="reduceAmount">
						<el-input v-model="form.reduceAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.prodName')" prop="prodName">
						<el-input v-model="form.prodName" :maxlength="1000" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.num')" prop="num">
						<el-input v-model="form.num" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.isPayed')" prop="isPayed">
						<el-select v-model="form.isPayed" disabled placeholder="">
							<el-option :value="true" label="是"></el-option>
							<el-option :value="false" label="否"></el-option>
						</el-select>
						<!-- <el-input disabled v-model="form.isPayed" clearable show-word-limit /> -->
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.payMethod')" prop="payMethod">
						<el-select v-model="form.payMethod" disabled>
							<el-option v-for="item in biz_order_pay_method" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
						<!-- <el-input disabled v-model="form.payMethod" clearable show-word-limit /> -->
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.transactionId')" prop="transactionId">
						<el-input v-model="form.transactionId" :maxlength="64" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<!-- <el-col :span="12" class="mb20">
          <el-form-item prop="deliveryType" :label="$t('Order.deliveryType')">
            <el-input disabled v-model="form.deliveryType" clearable show-word-limit />
          </el-form-item>
        </el-col> -->

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.logisticsNo')" prop="logisticsNo">
						<el-input v-model="form.logisticsNo" :maxlength="32" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.orderAddressId')" prop="orderAddressId">
						<el-input v-model="form.orderAddressId" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.isReceiving')" prop="isReceiving">
						<el-select v-model="form.isReceiving" disabled>
							<el-option :value="true" label="是"></el-option>
							<el-option :value="false" label="否"></el-option>
						</el-select>
						<!-- <el-input disabled v-model="form.isReceiving" clearable show-word-limit /> -->
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.isAutoReceiving')" prop="isAutoReceiving">
						<el-select v-model="form.isAutoReceiving" disabled>
							<el-option :value="true" label="是"></el-option>
							<el-option :value="false" label="否"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.isAutoCancel')" prop="isAutoCancel">
						<el-select v-model="form.isAutoCancel" disabled>
							<el-option :value="true" label="是"></el-option>
							<el-option :value="false" label="否"></el-option>
						</el-select>
						<!-- <el-input disabled v-model="form.isAutoCancel" clearable show-word-limit /> -->
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.payTime')" prop="payTime">
						<el-input v-model="form.payTime" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.deliveryTime')" prop="deliveryTime">
						<el-input v-model="form.deliveryTime" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.receivingTime')" prop="receivingTime">
						<el-input v-model="form.receivingTime" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.completeTime')" prop="completeTime">
						<el-input v-model="form.completeTime" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.cancelTime')" prop="cancelTime">
						<el-input v-model="form.cancelTime" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.userCouponId')" prop="userCouponId">
						<el-input v-model="form.userCouponId" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.userPromoCodeId')" prop="userPromoCodeId">
						<el-input v-model="form.userPromoCodeId" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.couponAmount')" prop="couponAmount">
						<el-input v-model="form.couponAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.promoCodeAmount')" prop="promoCodeAmount">
						<el-input v-model="form.promoCodeAmount" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.source')" prop="source">
						<el-input v-model="form.source" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.closeType')" prop="closeType">
						<el-input v-model="form.closeType" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>

				<el-col :span="12" class="mb20">
					<el-form-item :label="$t('Order.remark')" prop="remark">
						<el-input v-model="form.remark" :maxlength="255" clearable disabled show-word-limit />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<el-table :cell-style="tableStyle.cellStyle" :data="form.orderItemList" :header-cell-style="tableStyle.headerCellStyle">
			<el-table-column :label="$t('Order.productInfo')" prop="prod" width="360">
				<template #default="props">
					<div class="prod-img-box">
						<img :src="$getFileUri(props.row.pic)" alt="" class="br-12" />
						<!-- <img src="/@/assets/lockScreen.png"> -->
						<div>
							<span>{{ props.row.prodName }}</span>
							<div>{{ props.row.properties }}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="prod" :label="$t('Order.prodName')"> </el-table-column> -->
			<el-table-column :label="$t('Order.prodId')" prop="prodId" width="260"></el-table-column>
			<el-table-column :label="$t('Order.amount')" prop="amount">
				<template #default="{ row }">
					{{ $amountFormat(row.amount) }}
				</template>
			</el-table-column>
			<el-table-column :label="$t('Order.num')" prop="num"></el-table-column>
		</el-table>

		<!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
      </span>
    </template> -->
	</el-dialog>
</template>

<script lang="ts" name="OrderDialog" setup>
import { useMessage } from '/@/hooks/message';
import { addObj, getObj, putObj } from '/@/api/bizs/Order';
import CardInfoCol from '/@/components/biz/card-info-col.vue';
import OrderStateTag from '/@/components/biz/orderStateTag.vue';
// 定义i18n
import { useI18n } from 'vue-i18n';
// 定义字典
import { useDict } from '/@/hooks/dict';

const emit = defineEmits(['refresh']);

const { t } = useI18n();

const { biz_order_type, biz_order_state, biz_order_pay_method } = useDict('biz_order_type', 'biz_order_state', 'biz_source', 'biz_order_pay_method');

defineProps(['tableStyle']);
// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const dataFormRef = ref();

// 提交表单数据
const form = reactive({
	id: '',
	type: '',
	state: '',
	uid: '',
	userNickname: '',
	userAvatar: '',
	shopId: '',
	shopName: '',
	shopAvatar: '',
	orderAmount: '',
	actualAmount: '',
	taxAmount: '',
	freightAmount: '',
	reduceAmount: '',
	prodName: '',
	num: '',
	isPayed: '',
	payMethod: '',
	transactionId: '',
	deliveryType: '',
	logisticsNo: '',
	orderAddressId: '',
	isReceiving: '',
	isAutoReceiving: '',
	isAutoCancel: '',
	payTime: '',
	deliveryTime: '',
	receivingTime: '',
	completeTime: '',
	cancelTime: '',
	userCouponId: '',
	userPromoCodeId: '',
	couponAmount: '',
	promoCodeAmount: '',
	source: '',
	closeType: '',
	remark: '',
	orderItemList: [],
});

// 定义校验规则
// import { rule } from '/@/utils/validate';
const dataRules = ref({
	type: [{ required: false, message: t('Order.inputTypeTip'), trigger: 'blur' }],
	state: [{ required: false, message: t('Order.inputStateTip'), trigger: 'blur' }],
	uid: [{ required: false, message: t('Order.inputUidTip'), trigger: 'blur' }],
	userNickname: [{ required: false, message: t('Order.inputUserNicknameTip'), trigger: 'blur' }],
	userAvatar: [{ required: false, message: t('Order.inputUserAvatarTip'), trigger: 'blur' }],
	shopId: [{ required: false, message: t('Order.inputShopIdTip'), trigger: 'blur' }],
	shopName: [{ required: false, message: t('Order.inputShopNameTip'), trigger: 'blur' }],
	shopAvatar: [{ required: false, message: t('Order.inputShopAvatarTip'), trigger: 'blur' }],
	orderAmount: [{ required: false, message: t('Order.inputOrderAmountTip'), trigger: 'blur' }],
	actualAmount: [{ required: false, message: t('Order.inputActualAmountTip'), trigger: 'blur' }],
	taxAmount: [{ required: false, message: t('Order.inputTaxAmountTip'), trigger: 'blur' }],
	freightAmount: [{ required: false, message: t('Order.inputFreightAmountTip'), trigger: 'blur' }],
	reduceAmount: [{ required: false, message: t('Order.inputReduceAmountTip'), trigger: 'blur' }],
	prodName: [{ required: false, message: t('Order.inputProdNameTip'), trigger: 'blur' }],
	num: [{ required: false, message: t('Order.inputNumTip'), trigger: 'blur' }],
	isPayed: [{ required: false, message: t('Order.inputIsPayedTip'), trigger: 'blur' }],
	payMethod: [{ required: false, message: t('Order.inputPayMethodTip'), trigger: 'blur' }],
	transactionId: [{ required: false, message: t('Order.inputTransactionIdTip'), trigger: 'blur' }],
	deliveryType: [{ required: false, message: t('Order.inputDeliveryTypeTip'), trigger: 'blur' }],
	logisticsNo: [{ required: false, message: t('Order.inputLogisticsNoTip'), trigger: 'blur' }],
	orderAddressId: [{ required: false, message: t('Order.inputOrderAddressIdTip'), trigger: 'blur' }],
	isReceiving: [{ required: false, message: t('Order.inputIsReceivingTip'), trigger: 'blur' }],
	isAutoReceiving: [{ required: false, message: t('Order.inputIsAutoReceivingTip'), trigger: 'blur' }],
	isAutoCancel: [{ required: false, message: t('Order.inputIsAutoCancelTip'), trigger: 'blur' }],
	payTime: [{ required: false, message: t('Order.inputPayTimeTip'), trigger: 'blur' }],
	deliveryTime: [{ required: false, message: t('Order.inputDeliveryTimeTip'), trigger: 'blur' }],
	receivingTime: [{ required: false, message: t('Order.inputReceivingTimeTip'), trigger: 'blur' }],
	completeTime: [{ required: false, message: t('Order.inputCompleteTimeTip'), trigger: 'blur' }],
	cancelTime: [{ required: false, message: t('Order.inputCancelTimeTip'), trigger: 'blur' }],
	userCouponId: [{ required: false, message: t('Order.inputUserCouponIdTip'), trigger: 'blur' }],
	userPromoCodeId: [{ required: false, message: t('Order.inputUserPromoCodeIdTip'), trigger: 'blur' }],
	couponAmount: [{ required: false, message: t('Order.inputCouponAmountTip'), trigger: 'blur' }],
	promoCodeAmount: [{ required: false, message: t('Order.inputPromoCodeAmountTip'), trigger: 'blur' }],
	source: [{ required: false, message: t('Order.inputSourceTip'), trigger: 'blur' }],
	closeType: [{ required: false, message: t('Order.inputCloseTypeTip'), trigger: 'blur' }],
	remark: [{ required: false, message: t('Order.inputRemarkTip'), trigger: 'blur' }],
});

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	form.id = '';

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

	// 获取信息
	if (id) {
		form.id = id;
		initFormData(id);
	}
};

// 初始化表单
const initFormData = (id: string) => {
	// 获取数据
	loading.value = true;
	getObj(id)
		.then((res: any) => {
			Object.assign(form, res.data);
		})
		.finally(() => {
			loading.value = false;
		});
};

// 提交表单
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? t('common.editSuccessText') : t('common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.prod-img-box {
	display: flex;
	gap: 12px;

	img {
		width: 100px;
	}
}
</style>
